<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>人员选择</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-toast.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/chooseserviceuser.css" />
    <style>
        .new-top-header {
            position: fixed;
            width: 100%;
            z-index: 3;
            background: #fff;
            box-shadow: rgb(193 195 197 / 6%) 0px 5px 4px 0px;
        }

        .aui-searchbar {
            margin-top: 0px;
            background: #fff;
            padding-top: 5px;
            padding-bottom: 5px;
            border-radius: 0px;
        }

        .aui-searchbar-input {
            background: #eee !important;
            border-radius: 4px;
            line-height: 1.6rem;
            height: 1.6rem;
            margin: 0 0.6rem;
        }
        .aui-searchbar-input-white{
            box-shadow:unset;
        }

        .aui-searchbar-input.aui-searchbar-input-white input {
            height: 1.6rem;
            line-height: 1.6rem;
        }

        .header-position {
            padding: 0 0.8rem;
            background: #fff;
            padding-bottom: 10px;
        }

        .text-grey {
            color: #999;
        }

        .text-blue {
            color: #289FFF;
        }

        .new-vant-check {
            background: #fff;
            padding: 10px 0.8rem;
        }

        .cy-title {
            background: #eee;
            padding: 10px 0.8rem;
        }

        .aui-list .aui-list-item-media {
            width: 3.2rem;
        }

        .aui-list-item-left {
            width: 2rem !important;
            /* margin-right: 10px; */
        }

        .new-left-list {
            margin-top: -0.5rem;
            border-radius: 50%;
        }

        .new-text-list {
            width: 100%;
            max-width: 240px;
        }

        .xj-text {
            width: 2rem;
            top: 50%;
            position: absolute;
        }
        .aui-list .aui-list-item-text{
            color: #333;
        }
        .border-top10{
            border-top: solid 10px #eee;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <section class="aui-content contentBox">
            <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
            </div>
            <!-- 顶部 -->
            <div id="topSearch"  class="new-top-header">
                <!-- 搜索 -->
                <div class="aui-searchbar" id="search">
                    <div class="aui-searchbar-input aui-searchbar-input-white aui-border-radius">
                        <i class="icon iconfont icon-sousuo"></i>
                        <input v-model="form.keywords" type="search"  @keydown="onSearchChange()" placeholder="姓名" id="search-input">
                        <div class="aui-searchbar-clear-btn" style="top:12px">
                            <i class="icon iconfont icon-guanbi"></i>
                        </div>
                    </div>
                    <div class="aui-searchbar-btn" tapmode></div>
                </div>

                <div class="header-position">
                    <label v-on:click="doComClick(itemt)" v-for="(itemt,indext) in selComlist" class="text-grey">
                        <span v-bind:class="{'text-blue':itemt.ID!=CompanyModel.ID}">{{itemt.text}}</span>
                        <i v-if="indext<(selComlist.length-1)" class="icon iconfont icon-arrow-right"></i>
                    </label>
                </div>

                <div v-on:click="onAllCheck()" class="border-top10">
                    <van-checkbox v-model="Allchecked" class="new-vant-check">全选</van-checkbox>
                </div>
            </div>


            <!-- 人员 -->
            <div :style="{'margin-top':SearchHeight+'px'}">
                <div v-if="form.keywords==''" class="aui-list">
                    <div v-for="(item,index) in positionlist"  class="aui-list-item" style="display: block;" >
                        <div class="aui-media-list-item-inner">
                            <div v-on:click="doChoosUserPosition(item)" class="aui-list-item-left">
                                <input type="checkbox" class="aui-checkbox  new-left-list" v-bind:checked="item.IsSelected">
                            </div>
                            <div  class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10" v-bind:class="{'border-bottomLine':index<positionlist.length-1}">
                                <div v-on:click="doChoosUserPosition(item)" class="aui-list-item-text new-text-list ellipsis_one" style="display: block;">
                                    {{item.DepartmentNmae}} 
                                    <span class="text-grey"> ({{item.UserChildrenList.length}}<span>人</span>)</span>
                                </div>
                            </div>
                            <div v-if="item.UserChildrenList.length>0" v-on:click="doChooseNext(item)" class="text-blue new-right-list xj-text">下级</div>
                        </div>
                    </div>
                    <div v-if="CompanyModel.DepartmentTypeID==1" v-for="(item,index) in nopositionlist"  class="aui-list-item" style="display: block;" >
                        <div class="aui-media-list-item-inner">
                            <div v-on:click="doChoosUserPosition(item)" class="aui-list-item-left">
                                <input type="checkbox" class="aui-checkbox  new-left-list" v-bind:checked="item.IsSelected">
                            </div>
                            <div  class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10" v-bind:class="{'border-bottomLine':index<positionlist.length-1}">
                                <div v-on:click="doChoosUserPosition(item)" class="aui-list-item-text new-text-list ellipsis_one" style="display: block;">
                                    {{item.DepartmentNmae}} 
                                    <span class="text-grey"> ({{item.UserChildrenList.length}}<span>人</span>)</span>
                                </div>
                            </div>
                            <div v-if="item.UserChildrenList.length>0" v-on:click="doChooseNext(item)" class="text-blue new-right-list xj-text">下级</div>
                        </div>
                    </div>
                </div>

                <div v-if="(cxlist.length>0&&form.keywords=='')&&CompanyModel.DepartmentTypeID==1"  class="cy-title text-grey"><span  >常选人员</span></div>
                <div v-if="cxlist.length>0&&form.keywords==''&&CompanyModel.DepartmentTypeID==1" class="aui-list">
                    <div v-for="(item2,index2) in cxlist" class="aui-list-item"  v-on:click="doChoosUser(item2)" style="display: block;">
                        <div class="aui-media-list-item-inner ptb " v-bind:class="{'border-bottomLine':index2<cxlist.length-1}">
                                <div class="aui-list-item-left" >
                                    <input type="checkbox" class="aui-checkbox  new-left-list" v-bind:checked="item2.IsSelected">
                                </div>
                            <div class="aui-list-item-media">
                                <div class="photo-content">
                                    <div>
                                        <img v-if="item2.HeadImg==''||item2.HeadImg==undefined||item2.HeadImg=='undefined'"
                                            class="photo-bg"
                                            src="../image/default.png">
                                        <img v-if="item2.HeadImg!=''&&item2.HeadImg!=undefined&&item2.HeadImg!='undefined'"
                                            class="photo-bg" :src="item2.HeadImg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10"  style="display: flex;flex-wrap:wrap;">
                                <div class="aui-list-item-text new-text-list ellipsis_one">
                                    {{item2.UserName}}
                                </div>
                                <div v-if="item2.DepartmentName" class="aui-list-item-text new-text-list ellipsis_one text-grey">
                                    {{item2.DepartmentName}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="form.keywords!=''||CompanyModel.DepartmentTypeID!=1" class="aui-list" v-bind:class="{'border-top10':CompanyModel.DepartmentTypeID!=3&&CompanyModel.DepartmentTypeID!=0&&form.keywords==''}">
                    <div v-for="(item2,index2) in list" class="aui-list-item"  v-on:click="doChoosUser(item2)" style="display: block;">
                        <div class="aui-media-list-item-inner ptb " v-bind:class="{'border-bottomLine':index2<list.length-1}">
                                <div class="aui-list-item-left" >
                                    <input type="checkbox" class="aui-checkbox  new-left-list" v-bind:checked="item2.IsSelected">
                                </div>
                            <div class="aui-list-item-media">
                                <div class="photo-content">
                                    <div>
                                        <img v-if="item2.HeadImg==''||item2.HeadImg==undefined||item2.HeadImg=='undefined'"
                                            class="photo-bg"
                                            src="../image/default.png">
                                        <img v-if="item2.HeadImg!=''&&item2.HeadImg!=undefined&&item2.HeadImg!='undefined'"
                                            class="photo-bg" :src="item2.HeadImg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10"  style="display: flex;flex-wrap:wrap;">
                                <div class="aui-list-item-text new-text-list ellipsis_one">
                                    {{item2.UserName}}
                                </div>
                                <div v-if="item2.DepartmentName" class="aui-list-item-text new-text-list ellipsis_one text-grey">
                                    {{item2.DepartmentName}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>

        <!--底部弹出-->
        <div v-if="showchoose" class="choose-list">
            <div class="choose-header border-bottomLine">
                已选：{{totalchooseList.length}} 人
                <label class="header-close">
                    <i v-on:click="showChooseAll()" class="icon iconfont icon-shoulishibaiicon fr"></i>
                </label>

            </div>

            <div v-if="chooseList.length>0||chooseposList.length>0" class="aui-content aui-margin-b-15 pt50">
                <ul class="aui-list aui-media-list">
                    <li v-for="(item,index) in chooseposList" class="aui-list-item border-bottomLine">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title">
                                    <ul class="aui-list-view aui-thumb-view">
                                        <li class="aui-list-view-cell aui-img new-col-xs4">
                                            {{item.DepartmentNmae}} <span class="text-grey">({{item.Children.length}}人)</span>
                                        </li>
                                    </ul>
                                </div>
                                <div v-on:click="doChoosUserPosition(item)" class="aui-list-item-right">
                                    <label class="btn-del-show text-blue"> <i
                                            class="icon iconfont icon-shanchu "></i> 移除</label>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li v-for="(item,index) in chooseList" class="aui-list-item"
                        v-bind:class="{'border-bottomLine':index<chooseList.length-1}">
                        <div class="aui-media-list-item-inner ptb">
                            <div class="aui-list-item-media ">
                                <div class="photo-content">
                                    <div>
                                        <img v-if="item.HeadImg==''||item.HeadImg==undefined||item.HeadImg=='undefined'"
                                            class="photo-bg"
                                            src="../image/default.png">
                                        <img v-if="item.HeadImg!=''&&item.HeadImg!=undefined&&item.HeadImg!='undefined'"
                                            class="photo-bg" :src="item.HeadImg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        <ul class="aui-list-view aui-thumb-view">
                                            <li class="aui-list-view-cell aui-img aui-col-xs-4 new-col-xs4">
                                                {{item.UserName}}
                                            </li>
                                        </ul>
                                    </div>
                                    <div v-on:click="doChoosUser(item)" class="aui-list-item-right">
                                        <label class="btn-del-show text-blue"> <i
                                                class="icon iconfont icon-shanchu "></i> 移除</label>
                                    </div>
                                </div>
                            </div> -->
                            <div class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10"  style="display: flex;flex-wrap:wrap;">
                                <div class="aui-list-item-text new-text-list ellipsis_one">
                                    {{item.UserName}}
                                </div>
                                <div v-if="item.DepartmentName" class="aui-list-item-text new-text-list ellipsis_one text-grey">
                                    {{item.DepartmentName}}
                                </div>
                            </div>

                            <div v-on:click="doChoosUser(item)" class="text-blue new-right-list xj-text" style="right: 25px;">
                                <label class="btn-del-show text-blue"> <i
                                        class="icon iconfont icon-shanchu "></i> 移除</label>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--底部按钮-->
        <div class="aui_bottom">
            <div v-on:click="showChooseAll()" class="left-btn">
                已选：{{totalchooseList.length}} 人
                <i v-if="showchoose" class="icon iconfont icon-shangjiantou"></i>
                <i v-if="!showchoose" class="icon iconfont icon-down"></i>
            </div>
            <div v-on:click="do_save()" class="right-btn">提交</div>
        </div>



    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-collapse.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="js/chooseuser.js"></script>

</html>